<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>test</title>
</head>
<style type="text/css">
    .content {
        display: flex;
        flex-direction: row
    }

    .list {
        display: flex;
        width: 20%;
        height: 100%;
    }

    .logger {
        display: flex;
        width: 80%;
        height: 100%;
    }
</style>

<body class="content">
    <div class="list">
        {% if device_list %}
        <ul>
            {% for device in device_list %}
            <li> {% if device.state == 1 %}
                在线
                {% else %}
                离线
                {% endif %}
                —— {{ device.name }}</li>
            {% endfor %}
        </ul>
        {% else %}
        <p>没有绑定设备</p>
        {% endif %}

    </div>
    <div class="logger">
        <textarea id="logger" cols="150" rows="80"></textarea>
    </div>

    <script>

        const loggerSocket = new WebSocket(
            'ws://127.0.0.1:8000/comm/logger/receive/1/'
        );

        loggerSocket.onmessage = function (e) {
            document.querySelector('#logger').value += (e.data + '\n');
        };

        loggerSocket.onclose = function (e) { };
    </script>
</body>

</html>